import React, { Component } from "react";
import { NavBar, Icon, SearchBar } from "antd-mobile";
import style from "./SearchCenter.module.scss";
import axios from "../../../utils/fecth";
import { withRouter } from "react-router-dom"
import img from "../../../utils/img"
class SearchCenter extends Component {
    getProductList = (params) => {
        console.log("获取产品列表");
        //
        axios
            .get("/goods/qsearch", {
                params: {
                    query: this.state.inputVal,
                },
            })
            .then((res) => {
                console.log(res);
                this.setState({
                    productList: res,
                });
            });
    };
    state = {
        inputVal: "",
        productList: [],
    };
    handleItemClick = (e) => {
        let goods_id = e.target.getAttribute("data-goods_id");
        console.log(e.target);
        console.log(goods_id);
        this.props.history.push("/goodDetail/" + goods_id);
    }

    render() {
        return (
            <div className={style.ygSc}>
                <NavBar
                    className={style.ygScNav}
                    mode="light"
                    icon={<Icon type="left" />}
                    onLeftClick={() => window.history.go(-1)}
                >
                   <div className={style.ygScTitle}>搜索中心</div> 
               </NavBar>
                {/* 搜索中心输入框开始 */}
                <SearchBar
                    className={style.ygScSearch}
                    placeholder="Search"
                    value={this.state.inputVal}
                    // 是键盘 按下 enter 键触发
                    //   onSubmit={(value) => console.log(value, "onSubmit")}
                    // 清除输入内容时触发的
                    //   onClear={(value) => console.log(value, "onClear")}
                    // 聚焦的时候 触发
                    // onFocus={() => console.log("onFocus")}
                    // 失焦 触发
                    //   onBlur={() => console.log("onBlur")}
                    onCancel={() => this.getProductList()}
                    showCancelButton
                    cancelText="搜索"
                    // 内容改变的时候触发
                    onChange={(value) => {
                        console.log(value);
                        this.setState({
                            inputVal: value,
                        });
                    }}
                />
                {/* 搜索中心输入框结束 */}
                {/* 产品列表开始 */}
                <div className={style.ygScList} onClick={this.handleItemClick}>
                    {this.state.productList.map((v) => {
                        return (
                            <div className={style.scListItem} key={v.goods_id} data-goods_id={v.goods_id}>
                                <img src={img.tutu} alt="" data-goods_id={v.goods_id} />
                                <div className="scListTitle" data-goods_id={v.goods_id}>{v.goods_name}</div>
                            </div>
                        );
                    })}
                </div>
                {/* 产品列表结束 */}
            </div>
        );
    }
}
export default withRouter(SearchCenter)
